<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
        <title>Welcome to Design Zone......</title>
        <link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/file-upload.css" />
        <link rel="stylesheet" type="text/css" href="../../styles/dzbase.css" />
        <script type="text/javascript" src="../../scripts/ext/adapter/ext-base.js">
        </script>
        <script type="text/javascript" src="../../scripts/ext/ext-all.js">
        </script>
        <script type="text/javascript" src="../../scripts/menu/EditableItem.js">
        </script>
		<script type="text/javascript" src="../../scripts/grid/GroupSummary.js">
        </script>
        <script type="text/javascript" src="../../scripts/menu/RangeMenu.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/GridFilters.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/Filter.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/StringFilter.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/ListFilter.js">
        </script>
		<script type="text/javascript" src="../../scripts/grid/filter/DateFilter.js"></script>
        <script type="text/javascript" src="../../scripts/form/FileUploadField.js">
        </script>
        <script type="text/javascript" src="../../scripts/i18nMessage.js">
        </script>
		<script type="text/javascript" src="../../scripts/utils.js">
        </script>
		<script type="text/javascript" src="../../scripts/selectYarn.js">
        </script>
        <script type="text/javascript">
            var piMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.productidentification');
			var referenceMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.reference');
			var fcMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.francecustomer');
			var yarnMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.yarn');
            var message = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=message');
			
			var piYarnStore;
			var piYarnGrid;
			
			var selectYarnCallback = function(id, reference, ctYarnType, ctMaterialType,pantoneColor, realColor, customerColor, factoryColor, stock){
				//alert(id + ' : ' + reference + ' : ' + ctYarnType + ' : ' + ctMaterialType + ' : ' + stock);
				//alert(pantoneColor + ' : ' + realColor + ' : ' + customerColor + ' : ' + factoryColor);
				document.getElementById('biYarnId').value = id;
				document.getElementById('reference').value = reference;
				document.getElementById('ctYarnType').value = ctYarnType;
				document.getElementById('ctMaterialType').value = ctMaterialType;
				document.getElementById('stock').value = stock;
				
				document.getElementById('pantoneColor').value = pantoneColor;
				if(realColor){
					document.getElementById('sampleTable').style['backgroundColor'] = '#' + realColor;
				}
				document.getElementById('customerColor').value = customerColor;
				document.getElementById('factoryColor').value = factoryColor;
			}
			
			var deleteCallback = function(btn){
                if (btn == 'yes') {
                    Ext.Ajax.request({
                        url: '../../servlet/ProductIdentificationServlet?action=204&id=' + deleteId,
                        success: function(o){
                            if (o.responseText == 'success') {
                                piYarnStore.reload();
                                messageTip.msg(message.get('message.tip'), message.get('message.delete.successful'));
                            }
                            else {
                                messageTip.msg(message.get('message.tip'), message.get('message.delete.unsuccessful'));
                            }
                        },
                        failure: function(o){
                            messageTip.msg(message.get('message.tip'), message.get('message.delete.failure'));
                        },
                        params: {
                            foo: 'bar'
                        }
                    });
                }
            }
			
			var editCallback = function(){
				piYarnForm.getForm().load({
					url:'../../servlet/ProductIdentificationServlet?action=203&id=' + editId, 
					waitMsg:Ext.LoadMask.prototype.msg, 
					success: function(form, action){
						document.getElementById('sampleTable').style['backgroundColor'] = '#' + document.getElementById('realColor').value;
					}
				});
			}
            
            var yarnXmlLoader = new xmlLoader('../../servlet/BiYarnServlet?action=5');
            
            var yarnStore = new Ext.data.Store({
                reader: new Ext.data.XmlReader({
                    record: 'item',
                    id: 'id',
                    totalRecords: 'itemTotal'
                }, ['id', 'name', 'minWeight', 'comment']),
                data: yarnXmlLoader.getXml()
            });
            
            var yarnCombo = new Ext.form.ComboBox({
                fieldLabel: piMessage.get('ui.productidentification.yarn'),
                id: 'yarn',
                name: 'yarn',
                allowBlank: false,
                blankText: message.get('message.edit.noblank'),
                store: yarnStore,
                valueField: 'id',
                typeAhead: true,
                displayField: 'name',
				tpl: '<tpl for="."><div ext:qtip="<p><b>' + yarnMessage.get('ui.yarn.minweight') +':</b> {minWeight} Kg</p><p><b>' + message.get('message.edit.comment') + ':</b>{comment}</p>" class="x-combo-list-item">{name}</div></tpl>',
                triggerAction: 'all',
                emptyText: message.get('message.combo.pleaseselect'),
                selectOnFocus: true,
                mode: 'local'
            });
            
            var idValue = getPrarmeterValue(window.location, 'id');
            var startPage = getPrarmeterValue(window.location, 'startPage');
            
            Ext.onReady(function(){
                Ext.QuickTips.init();
                Ext.form.Field.prototype.msgTarget = 'side';
                
                 var piXMLReader = new Ext.data.XmlReader({
                    record: 'item'
                }, [{
                    name: 'id',
                    mapping: 'id'
                }, {
                    name: 'ctProductFamily',
                    mapping: 'ctProductFamily'
                }, {
                    name: 'ctMachineType',
                    mapping: 'ctMachineType'
                }, {
                    name: 'type',
                    mapping: 'type'
                }, {
                    name: 'orderNumber',
                    mapping: 'orderNumber'
                }, {
                    name: 'yarnNumber',
                    mapping: 'yarnNumber'
                }, {
                    name: 'ctDesignType',
                    mapping: 'ctDesignType'
                }, {
                    name: 'style',
                    mapping: 'style'
                }, {
                    name: 'customerLinkman',
                    mapping: 'customerLinkman'
                }, {
                    name: 'model',
                    mapping: 'model'
                }, {
                    name: 'ctSeasonNumber',
                    mapping: 'ctSeasonNumber'
                }, {
                    name: 'reference',
                    mapping: 'reference'
                }, {
                    name: 'createDate',
                    mapping: 'createDate'
                }, {
                    name: 'ctVersion',
                    mapping: 'ctVersion'
                }, {
                    name: 'patronageNumer',
                    mapping: 'patronageNumer'
                }, {
                    name: 'front',
                    mapping: 'front'
                }, {
                    name: 'back',
                    mapping: 'back'
                }, {
                    name: 'sleeves',
                    mapping: 'sleeves'
                }, {
                    name: 'bottomThrum',
                    mapping: 'bottomThrum'
                }, {
                    name: 'sleevesThrum',
                    mapping: 'sleevesThrum'
                }, {
                    name: 'necklineThrum',
                    mapping: 'necklineThrum'
                }, {
                    name: 'needle',
                    mapping: 'needle'
                }, {
                    name: 'weight',
                    mapping: 'weight'
                }, {
                    name: 'comment',
                    mapping: 'comment'
                }, {
                    name: 'customerID',
                    mapping: 'customerID'
                }, {
                    name: 'photoName',
                    mapping: 'photoName'
                }, {
                    name: 'chartName',
                    mapping: 'chartName'
                }, {
                    name: 'biMeasureSpecificationId',
                    mapping: 'biMeasureSpecificationId'
                }, {
                    name: 'biMeasureSpecificationName',
                    mapping: 'biMeasureSpecificationName'
                }, {
                    name: 'yarnName',
                    mapping: 'yarnName'
                }, {
                    name: 'frontPhotoName',
                    mapping: 'frontPhotoName'
                }, {
                    name: 'backPhotoName',
                    mapping: 'backPhotoName'
                }, {
                    name: 'photoName',
                    mapping: 'photoName'
                }, {
                    name: 'chartName',
                    mapping: 'chartName'
                }, {
                    name: 'ctCollarType',
                    mapping: 'ctCollarType'
                }, {
                    name: 'customerName',
                    mapping: 'customerName'
                }, {
                    name: 'customerDepartment',
                    mapping: 'customerDepartment'
                }]);
                
                var piXmlLoader = new xmlLoader('../../servlet/ProductIdentificationServlet?action=11&id=' + idValue);
                
                var piRecord = piXMLReader.readRecords(piXmlLoader.getXml()).records[0];
                
                var itemTplMarkup = ['<table cellspacing="0" id="the-table" style="width: 100%;"><tbody>',
										 '<tr><td style="background:#eeeeee; width: 15%;">',
										 message.get('message.list.id'), '</td><td>{id}</td>', 
										 '<td style="background:#eeeeee;width: 15%;">', 
										 piMessage.get('ui.productidentification.style'), 
										 '</td><td>{style}</td><td style="background:#eeeeee;">', 
										 piMessage.get('ui.productidentification.seasonnumber'), 
										 '</td><td>{ctSeasonNumber}</td>', '<td style="background:#eeeeee;">', 
										 referenceMessage.get('ui.reference.reference'), 
										 '</td><td>{reference}</td></tr>', 
										 
										 
										 '<tr><td style="background:#eeeeee;">', 
										 message.get('message.edit.productfamily'), 
										 '</td><td>{ctProductFamily}</td><td style="background:#eeeeee;">', 
										 piMessage.get('ui.productidentification.patronagenumer'), 
										 '</td><td>{patronageNumer}</td><td style="background:#eeeeee;">', 
										 piMessage.get('ui.productidentification.chartversion'), 
										 '</td><td>{ctVersion}</td><td style="background:#eeeeee;">', 
										 piMessage.get('ui.productidentification.model'), 
										 '</td><td>{model}</td></tr>',
										 '<tr><td style="background:#eeeeee;">', 
										 referenceMessage.get('ui.reference.weight'), 
										 '</td><td>{weight}</td><td style="background:#eeeeee;">', 
										 message.get('message.edit.collar'), 
										 '</td><td>{ctCollarType}</td><td style="background:#eeeeee;">', 
										 fcMessage.get('ui.francecustomer.name'), 
										 '</td><td>{customerName}</td><td style="background:#eeeeee;">', 
										 fcMessage.get('ui.francecustomer.department'), 
										 '</td><td>{customerDepartment}</td></tr>',
										 
										 '<tr><td colspan="8">',
										 //'<img width="120" src="../../_temp/{frontPhotoName}"/>&nbsp;&nbsp;&nbsp;&nbsp;',
										 //'<img width="120" src="../../_temp/{backPhotoName}"/>&nbsp;&nbsp;&nbsp;&nbsp;',
										 '<img width="120" src="../../_temp/{chartName}"/>&nbsp;&nbsp;&nbsp;&nbsp;',
										 '<img width="120" src="../../_temp/{photoName}"/>',
										 '</td></tr>',
										 '</tbody></table>'];
                var itemTpl = new Ext.Template(itemTplMarkup);
                itemTpl.append('productIdentification', piRecord.data);
                
                var piYarnXMLReader = new Ext.data.XmlReader({
                    record: 'item'
                }, [{
                    name: 'id',
                    mapping: 'id'
                },{
                    name: 'biYarnId',
                    mapping: 'biYarnId'
                }, {
                    name: 'fil',
                    mapping: 'fil'
                }, {
                    name: 'precentage',
                    mapping: 'precentage'
                }, {
                    name: 'quantity',
                    mapping: 'quantity'
                }, {
                    name: 'quantity',
                    mapping: 'quantity'
                }, {
                    name: 'ctYarnType',
                    mapping: 'ctYarnType'
                }, {
                    name: 'ctMaterialType',
                    mapping: 'ctMaterialType'
                }, {
                    name: 'stock',
                    mapping: 'stock'
                }, {
                    name: 'reference',
                    mapping: 'reference'
                }, {
                    name: 'pantoneColor',
                    mapping: 'pantoneColor'
                }, {
                    name: 'customerColor',
                    mapping: 'customerColor'
                }, {
                    name: 'factoryColor',
                    mapping: 'factoryColor'
                }, {
                    name: 'realColor',
                    mapping: 'realColor'
                }]);
                
                piYarnForm = new Ext.FormPanel({
                    labelAlign: 'left',
                    url: '../../servlet/ProductIdentificationServlet?action=201',
                    frame: true,
                    title: piMessage.get('ui.productidentification.yarn'),
                    bodyStyle: 'padding:5px 5px 5px 5px;margin-top: 2px;',
                    width: '100%',
                    labelWidth: 75,
                    reader: piYarnXMLReader,
					collapsible: true,
                    items: [{
                        id: 'id',
                        name: 'id',
                        xtype: 'hidden'
                    }, {
                        id: 'piId',
                        name: 'piId',
                        xtype: 'hidden',
                        value: piRecord.data.id
                    }, {
                        id: 'biYarnId',
                        name: 'biYarnId',
                        xtype: 'hidden'
                    }, {
                        id: 'realColor',
                        name: 'realColor',
                        xtype: 'hidden'
                    }, {
                        layout: 'column',
                        items: [{
                            columnWidth: .25,
                            layout: 'form',
                            items: [{
                                id: 'reference',
                                name: 'reference',
                                xtype: 'textfield',
                                fieldLabel: message.get('message.edit.reference'),
                                anchor: '86%',
								width: '90%',
                                allowBlank: false,
                                blankText: message.get('message.edit.noblank'),
								emptyText: message.get('message.combo.pleaseselect'),
                                maxLength: 64,
                                maxLengthText: message.get('message.edit.toolong'),
								readOnly: true,
                                listeners: {
                                    'render': {
                                        fn: function(){
                                            Ext.getCmp('reference').getEl().on('click', function(){
                                                selectYarn();
                                            }, this);
                                        },
                                        scope: this
                                    }
                                }
                            },{
								id: 'pantoneColor',
                                name: 'pantoneColor',
                                fieldLabel: colorMessage.get('ui.pantonecolor.number'),
                                xtype: 'textfield',
								readOnly: true,
                                anchor: '86%',
								width: '90%',
                                maxLength: 64
                            },{
                                id: 'fil',
                                name: 'fil',
                                xtype: 'textfield',
                                fieldLabel: piMessage.get('ui.productidentification.fil'),
                                anchor: '86%',
								width: '90%',
								labelWidth: '140',
                                allowBlank: false,
                                blankText: message.get('message.edit.noblank'),
                                maxLength: 64,
                                maxLengthText: message.get('message.edit.toolong')
                            }]
                        }, {
                            columnWidth: .25,
                            layout: 'form',
                            items: [{
								id: 'ctYarnType',
	                            name: 'ctYarnType',
	                            fieldLabel: yarnMessage.get('ui.yarn.type'),
	                            xtype: 'textfield',
	                            anchor: '86%',
								width: '90%',
	                            allowBlank: false,
								readOnly: true,
	                            blankText: message.get('message.edit.noblank'),
	                            maxLength: 64
	                        },{
                                html: '<table><tr><td width="65">' +
                                colorMessage.get('ui.pantonecolor.realcolor') +
                                ': </td><td><table id="sampleTable" width="60" ><tr height="15"><td>&nbsp;</td></tr></table></td></tr></table>'
                            },{
                                id: 'precentage',
                                name: 'precentage',
                                xtype: 'numberfield',
                                fieldLabel: piMessage.get('ui.productidentification.precentage') + '(&nbsp;%&nbsp;)',
                                anchor: '86%',
								width: '90%',
                                allowBlank: false,
                                blankText: message.get('message.edit.noblank'),
                                maxLength: 64,
                                maxLengthText: message.get('message.edit.toolong')
                            }]
                        }, {
                            columnWidth: .25,
                            layout: 'form',
                            items: [{
								id: 'ctMaterialType',
	                            name: 'ctMaterialType',
	                            fieldLabel: message.get('message.edit.materialtype'),
	                            xtype: 'textfield',
	                            anchor: '86%',
								width: '90%',
	                            allowBlank: false,
								readOnly: true,
	                            blankText: message.get('message.edit.noblank'),
	                            maxLength: 64
	                        },{
								id: 'customerColor',
                                name: 'customerColor',
                                fieldLabel: colorMessage.get('ui.pantonecolor.customercolor'),
                                xtype: 'textfield',
								readOnly: true,
                                anchor: '86%',
								width: '90%',
                                maxLength: 64
                            },{
                                id: 'quantity',
                                name: 'quantity',
                                xtype: 'numberfield',
                                fieldLabel: yarnMessage.get('ui.yarn.quantity') + '<b>(Kg)</b>',
                                anchor: '86%',
								width: '90%',
                                allowBlank: false,
                                blankText: message.get('message.edit.noblank'),
                                maxLength: 64,
                                maxLengthText: message.get('message.edit.toolong')
                            }]
                        }, {
                            columnWidth: .25,
                            layout: 'form',
                            items: [{
								id: 'stock',
	                            name: 'stock',
	                            fieldLabel: message.get('message.edit.stock') + '<b>(Kg)</b>',
	                            xtype: 'numberfield',
	                            anchor: '86%',
								width: '90%',
	                            allowBlank: false,
								readOnly: true,
	                            blankText: message.get('message.edit.noblank'),
	                            maxLength: 64
	                        },{
								id: 'factoryColor',
                                name: 'factoryColor',
                                fieldLabel: colorMessage.get('ui.pantonecolor.factorycolor'),
                                xtype: 'textfield',
								readOnly: true,
                               	anchor: '86%',
								width: '90%',
                                maxLength: 64
                            }]
                        }]
                    }],
                    
                    buttons: [{
                        text: message.get('message.edit.save'),
                        handler: function(){
                            if (piYarnForm.getForm().isValid()) {
                                //document.getElementsByName('yarn')[0].value = yarnCombo.getValue();
                                
                                piYarnForm.getForm().submit({
                                    method: 'post',
                                    success: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.successful'));
                                        piYarnForm.getForm().reset();
										piYarnStore.load();
                                    },
                                    failure: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.unsuccessful'));
                                    }
                                });
                            }
                        }
                    }, {
                        text: message.get('message.edit.reset'),
                        handler: function(){
                            piYarnForm.getForm().reset();
                        }
                    }, {
                        text: message.get('message.edit.cancel'),
                        handler: function(){
                            if (startPage != null) {
                                window.location = 'product_identification_list.html?startPage=' + startPage;
                            }
                            else {
                                window.location = 'product_identification_list.html';
                            }
                        }
                    }]
                });
                
                piYarnForm.render('productIdentificationYarnForm');
                
				piYarnStore = new Ext.data.GroupingStore({
                    url: '../../servlet/ProductIdentificationServlet?action=202&id=' + piRecord.data.id,

                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'id',
                        totalRecords: 'itemTotal'
                    }, [ 
                    'index', 'id', 'fil', 'reference', 'ctYarnType', 'ctMaterialType', 'pantoneColor', 'realColor', 'customerColor', 'factoryColor','precentage', 
					{
						name:'quantity',
						type: 'float'
					}]),
                    groupField: 'index',
                    sortInfo: {
                        field: 'index',
                        direction: "ASC"
                    }
                }); 
				
				 var summary = new Ext.grid.GroupSummary();
				piYarnGrid = new Ext.grid.GridPanel({
                    title: yarnMessage.get('ui.yarn.listtitle'),
                    store: piYarnStore,
					stripeRows: true,
                    height: 560,
                    columns: [{
                        header: message.get('message.list.id'),
                        dataIndex: 'index',
						hidden: true
                    }, {
                        header: piMessage.get('ui.productidentification.fil'),
                        dataIndex: 'fil'
                    }, {
                        header: message.get('message.edit.reference'),
                        dataIndex: 'reference'
                    }, {
                        header: yarnMessage.get('ui.yarn.type'),
                        dataIndex: 'ctYarnType'
                    }, {
                        header: message.get('message.edit.materialtype'),
                        dataIndex: 'ctMaterialType'
                    }, {
                        header: piMessage.get('ui.productidentification.precentage'),
                        dataIndex: 'precentage',
						renderer:renderPrecentage
                    }, {
                        header: colorMessage.get('ui.pantonecolor.number'),
                        dataIndex: 'pantoneColor'
                    }, {
                        header: colorMessage.get('ui.pantonecolor.realcolor'),
                        dataIndex: 'realColor',
						renderer: renderSample
                    }, {
                        header: colorMessage.get('ui.pantonecolor.customercolor'),
                        dataIndex: 'customerColor'
                    }, {
                        header: colorMessage.get('ui.pantonecolor.factorycolor'),
                        dataIndex: 'factoryColor',
						summaryRenderer: function(v, params, data){
		                    return '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + message.get('message.list.total');
		                }
                    },{
                        header: yarnMessage.get('ui.yarn.quantity') + '<b>(Kg)</b>',
						id: 'total',
						align: 'right',
                        dataIndex: 'quantity',
						renderer: renderStock,
						summaryType:'sum'
                    },{
                        header: message.get('message.list.eidt'),
                        dataIndex: 'id',
                        renderer: renderEdit
                    },{
                        header: message.get('message.list.delete'),
                        dataIndex: 'id',
                        renderer: renderDelete
                    }],
                    viewConfig: {
                        forceFit: true
                    },
					view: new Ext.grid.GroupingView({
                        forceFit: true,
						hideGroupedColumn: false,
						enableNoGroups:false,
                        groupTextTpl: '{[values.rs.length]}&nbsp;&nbsp;'
                    }),
                    loadMask: true,
                    plugins: [summary],
                    renderTo: 'productIdentificationYarnList'
                });
				
				piYarnStore.load();
				
				function renderSample(value, p, record){
                    return String.format('<table width="20" style="background-color: #{0};"><tr><td>&nbsp;</td></tr></table>', record.data.realColor);
                }
				
				function renderPrecentage(value, p, record){
					return String.format('{0}%', value);
				}
				
				function renderEdit(value, p, record){
                    return String.format('<a href="javascript: editItem(editCallback, {0});"><img src="../../images/icons/pencil.png" title="' + message.get('message.list.eidt') + '" /></a>', record.id);
                }
                
                function renderDelete(value, p, record){
                    return String.format('<a href="javascript: deleteItem(deleteCallback, {0});"><img src="../../images/icons/delete.png" title="' + message.get('message.list.delete') + '"/></a>', record.id);
                }
                
            });
        </script>
    </head>
    <body>
        <div id="productIdentification">
        </div>
        <div id="productIdentificationYarnForm">
        </div>
		<div id="productIdentificationYarnList">
        </div>
    </body>
</html>
